<template>
<div class="addres container clearfix">
    <p class="address-title">地址：石景山古城西街19号（地铁1号线古城C口西北1200米）</p>
    <div class="address-pic fl">
        <img :src="addressPic" alt="">
    </div>
        <div class=" address-txt fr">
            <p>1公里内交通情况：</p>
            <p>1条地铁站/多个公交站</p>
            <p><img :src="aubway" alt=""> 古城地铁站(1号线)</p>
                <p><img :src="bus" alt=""> 首钢厂东门公交站、老古城公交站 天顺庄公交站、古城大院公交站
                ……</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addressPic: require('@/assets/map.png'),
            aubway: require('@/assets/subway.png'),
            bus: require('@/assets/bus.png')
        }
    },
}
</script>

<style lang="less" scoped>
.addres {
    margin: 70px auto 88px;
}

.address-title {
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #000000;
    letter-spacing: -0.11px;
    margin-bottom: 20px;
}

.address-txt {
    font-family: PingFangSC-Semibold;

    :nth-child(1) {
        font-size: 14px;
        color: #000000;
        letter-spacing: -0.07px;
        margin-bottom: 14px;
    }

    :nth-child(2) {
        font-size: 24px;
        color: #000000;
        letter-spacing: -0.11px;
        margin-bottom: 43px;
    }

    :nth-child(3) {
        color: #000000;
        letter-spacing: -0.07px;
        margin-bottom: 37px;

        img {
            vertical-align: middle;
             margin-bottom: 0;
        }
    }
    :nth-child(4) {
          color: #000000;
        letter-spacing: -0.07px;

        img {
            vertical-align: middle;
            margin-bottom: 0;
        }
    }
}
</style>
